<template>
  <nut-popup round :safe-area-inset-bottom="true" :zIndex="9999" position="bottom" v-model:visible="show">
    <nut-picker v-model="selectedValue" :columns="columns" :title="title" @confirm="confirm" @cancel="show = false">
    </nut-picker>
  </nut-popup>
</template>

<script setup>
import { ref, defineEmits, defineProps, defineExpose, watch } from 'vue'
const emit = defineEmits(['confirm', 'update:id', 'update:text'])
const props = defineProps({
  title: {
    type: String,
    required: false
  },
  id: {
    type: [Number, String],
  },
  text: {
    type: [Number, String],
  },
  columns: {
    type: Array,
    required: true
  },
})
let show = ref(false)
let selectedValue = ref([])
const confirm = (obj) => {
  console.log('%c [ obj ]-30', 'font-size:13px; background:#aa0822; color:#ee4c66;', obj)
  emit('update:id', obj.selectedOptions[0].value)
  emit('update:text', obj.selectedOptions[0].text)
  emit('confirm', obj)
  show.value = false
}
const open = (value) => {
  show.value = true
  selectedValue.value = []
  selectedValue.value.push(value)
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
</style>